昨天我們說到了網頁的事件中的瀏覽器事件和滑鼠相關事件，今天我們繼續了解剩下的事件：

1. 瀏覽器事件（網頁介面相關）
2. 滑鼠相關事件
3. 鍵盤相關事件
4. 表單相關事件
5. 特殊事件
6. 自訂事件

鍵盤相關事件

主要有三種鍵盤相關事件：

• keydown 按鍵按下去的時候觸發事件。
• keyup 離開你按下的按鍵時觸發事件。
• keypress 鍵盤內的某個按鍵被按下或者按住時觸發事件。

應用

在 JS 30 裡面，第一個應用就是用 keyCode 所做出的 drum kit。
主要的概念是：監聽你所按到的鍵盤按鍵進而發出不一樣的聲音。

首先我們要先了解，如何找出鍵盤對應的 keyCode。
兩種方法，
第一種方法：google。
第二種方法：我們自己來做一個

使用以上的方式就可以用 console.log 拿到你按下的鍵盤對應的按鍵。

簡單應用

根據監聽到的不同的按鍵球會往前移動一點。

表單相關事件

表單事件，我比較不熟悉，這裡會花多一點時間，HTML form 有兩種重要的屬性： action 和 method。

action 代表表單要將資訊往哪裡傳送，如果沒有寫，就會把資料往當前的頁面送。
method 代表表單資訊的傳送方法。

在 method 裡面最常使用的方法是 get 和 post

• get: 會把表單資料放在 form action 請求的位址 URL 上面送出。通常用在資料量較小或非敏感的資料，因為資料會被放在網址中直接傳出，這樣當我們傳送的資訊中有密碼，就很容易被看出。

• post: 會把表單資料放在 HTTP 傳輸封包 body 中送出。post 通常用在表單資料量比較大、有夾帶檔案上傳或隱私性考量的資料。

HTML form 也提供兩個方法：

• submit() 送出表單

form.submit() 方法可以讓 JavaScript 動態建立表單。

• reset() 清空表單資料

應用

取得表單資訊

document.forms 會取得表單的所有資訊

let form = document.getElementById('form')
let name = form.elements[0];

document.forms[0] 取得當前頁面的第一個表單元素

<form action="/signup" method="post" id="signup">   
    <input type="text" name="name" id="name" placeholder="Full Name">
    <input type="email" name="email" id="email" placeholder="Email Address">
    <input type="submit" value="submit" onclick='getData();>
</form>

以上面的 code 為例

getElementById

我們可以利用 getElementById 來取得表單中的值，像是這樣：

function getData() {
  const nameElement = document.getElementById("name");
  const name = nameElement.value;
  const emailElement = document.getElementById("email");
  const email = emailElement.value;
  alert("你的姓名是 " + name + "\n電子郵件是 " + email);
}

我們也可以對「表單」的 id 去使用 getElementById：

function getData() {
  const formElement = document.getElementById("form");
  const name = formElement[0].value;
  const email = formElement[1].value;
  alert("你的姓名是 " + name + "\n電子郵件是 " + email);
}

getElementsByTagName

使用 getElementsByTagName 需要注意的地方是，這裡是 getElement"s"
，表示一次會取得一整個陣列的值，因此要加上取得的是陣列中的第幾個值：

function getData() {
      const inputElement = document.getElementsByTagName('input');
      const name = inputElement[0].value;
      const email = inputElement[1].value;
      alert("你的姓名是 " + name + "\n電子郵件是 " + email);
    }

我們也可以直接取得某個 form 裡面的元素:

function getData() {
  const form = document.forms['form'];// 拿到 name 屬性是 form 的表單  
  const name = form.elements.name.value;  //拿到 elements 集合中 name 屬性為 name 的內容
  const email = form.elements.email.value;//拿到 elements 集合中 name 屬性為 name 的內容
  alert("你的姓名是 " + name + "\n電子郵件是 " + email);
}

以上，我們明天見